今天是鐵人賽 Day21，目標是完成購物車頁面功能，包含「顯示購物車清單」、「修改商品數量」、「刪除商品」以及「模擬結帳」。

1️⃣ 前端 Cart.jsx
今天完成購物車頁面的主要功能，包括串接後端購物車 API 取得商品清單，並在頁面上顯示每個商品的圖片、名稱、價格與數量，使用者可直接在購物車內修改數量或刪除商品。

// 取得購物車資料
const fetchCart = async () => {
  const token = localStorage.getItem("token");
  if (!token) return;

  try {
    const res = await axios.get("http://localhost:3000/api/cart", {
      headers: { Authorization: `Bearer ${token}` },
    });
    setCartItems(res.data.items);
  } catch (err) {
    console.error(err);
    setError("無法載入購物車，請稍後再試！");
  }
};

透過 GET /api/cart 取得使用者購物車資料
成功取得後將 items 存入 state，並動態渲染清單

2️⃣ 修改數量與刪除商品
購物車每個商品旁邊都有數量 input 與刪除按鈕：

// 修改數量
const handleQuantityChange = async (productId, newQty) => {
  await axios.put(
    "http://localhost:3000/api/cart/update",
    { productId, quantity: newQty },
    { headers: { Authorization: `Bearer ${token}` } }
  );
  setCartItems(res.data.items);
};

// 刪除商品
const handleRemove = async (productId) => {
  await axios.delete(
    `http://localhost:3000/api/cart/remove/${productId}`,
    { headers: { Authorization: `Bearer ${token}` } }
  );
  setCartItems(res.data.items);
};

使用者可直接在頁面修改數量或刪除商品，操作後會即時更新購物車清單。

3️⃣ 模擬結帳
點擊「模擬結帳」按鈕會清空購物車並跳出成功訊息：

const handleCheckout = () => {
  if (cartItems.length === 0) return alert("購物車目前沒有商品！");
  if (!window.confirm("確定要結帳嗎？")) return;

  setCartItems([]); // 清空前端購物車
  alert("結帳成功！感謝您的購買 🙌");
};

使用者可直接完成模擬結帳，不需實際呼叫後端 API。

4️⃣ 功能重點
購物車清單顯示商品圖片、名稱、價格與數量
可以即時修改商品數量與刪除商品
模擬結帳功能直接清空購物車並跳出成功訊息
前端與後端購物車 API 串接，資料即時同步

5️⃣ 測試流程
登入會員 → 前往購物車頁面 → 修改商品數量或刪除商品 → 點擊「模擬結帳」
成功 → 清空購物車並跳出成功訊息
失敗 → 顯示錯誤提示

🐛 遇到的問題與解決
問題：原本結帳會呼叫 API，但測試時後端未實作 checkout
解決：先在前端直接清空購物車，並顯示成功訊息，後續可再串接完整後端 checkout API

💡 Day21 收穫

• 完成購物車頁面前端功能
• 使用者可修改數量、刪除商品、模擬結帳
• 前端與後端 API 成功串接，清單資料即時更新
• 提升使用者購物體驗與操作便利性